<template>
  <button 
    class="custom-button" 
    :class="{
      'disabled': disabled || loading,
      'loading': loading
    }"
    :style="buttonStyle"
    @click="handleClick"
  >
    <view class="button-content">
      <text v-if="loading" class="loading-icon"></text><text :style="{ color: textColor }">{{ loading ? loadingText : text }}</text>
    </view>
  </button>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  text: {
    type: String,
    default: '按钮'
  },
  loadingText: {
    type: String,
    default: '加载中...'
  },
  loading: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  backgroundColor: {
    type: String,
    default: '#409eff'
  },
  // hoverColor: {
  //   type: String,
  //   default: '#66b1ff'
  // },
  // activeColor: {
  //   type: String,
  //   default: '#3a8ee6'
  // },
  // disabledColor: {
  //   type: String,
  //   default: '#a0cfff'
  // },
  textColor: {
    type: String,
    default: '#ffffff'
  }
})

const emit = defineEmits(['click'])

const buttonStyle = computed(() => {
  return {
    backgroundColor: props.backgroundColor,
    opacity: props.disabled? 0.7 : 1,
    // '--hover-color': props.hoverColor,
    // '--active-color': props.activeColor
  }
})

const handleClick = (event) => {
  if (props.disabled || props.loading) return
  emit('click', event)
}
</script>

<style lang="scss" scoped>
.custom-button {
  position: relative;
  padding: 12rpx 30rpx;
  border: none;
  border-radius: 8rpx;
  transition: all 0.3s;
  cursor: pointer;
  font-size: 28rpx;
  line-height: 1.5;
  min-height: auto;
  height: auto;
  margin: 0;
  &:active{
    opacity: 0.84;
  }
}

/* .custom-button:not(.disabled):hover {
  background-color: var(--hover-color) !important;
}

.custom-button:not(.disabled):active {
  background-color: var(--active-color) !important;
} */

.button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 8rpx;
  min-height: 44rpx;
}

.disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.loading-icon {
  display: inline-block;
  width: 24rpx;
  height: 24rpx;
  border: 2rpx solid #ffffff;
  border-radius: 50%;
  border-top-color: transparent;
  animation: loading 0.8s infinite linear;
  margin-right: 8rpx;
  vertical-align: middle;
}

.button-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4rpx;
  min-height: 44rpx;
  white-space: nowrap;
}

.loading-icon {
  display: inline-block;
  width: 24rpx;
  height: 24rpx;
  border: 2rpx solid #ffffff;
  border-radius: 50%;
  border-top-color: transparent;
  animation: loading 0.8s infinite linear;
  margin-right: 4rpx;
}

@keyframes loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>